<html><!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo - Droppable 使用示例</title><script src="../../../../../../g.tbcdn.cn/kissy/k/1.3.2/seed.js" tppabs="http://g.tbcdn.cn/kissy/k/1.3.2/seed.js" data-config="{combine:true}"></script>
<link rel="stylesheet" href="../../../../../../g.tbcdn.cn/kissy/k/1.3.2/css/dpl/base.css" tppabs="http://g.tbcdn.cn/kissy/k/1.3.2/css/dpl/base.css" />
<link rel="stylesheet" href="assets/box.css" tppabs="http://docs.kissyui.com/1.3/source/raw/demo/dd/assets/box.css" />
<link rel="stylesheet" href="assets/demo2.css" tppabs="http://docs.kissyui.com/1.3/source/raw/demo/dd/assets/demo2.css" />
</head>
<body>

<div id="container" class="container">
    <div class="box component" id="c1">
        <s class="box-tp"><b></b></s>
        <div class="box-hd">
            <h3>Drag</h3>
        </div>
        <div class="box-bd">
            intersect drag
        </div>
        <s class="box-bt"><b></b></s>
    </div>
    
    <div class="box component" id="c2">
        <s class="box-tp"><b></b></s>
        <div class="box-hd">
            <h3>Drag</h3>
        </div>
        <div class="box-bd">
            strict drag
        </div>
        <s class="box-bt"><b></b></s>
    </div>
    
    <div class="box component" id="c3">
        <s class="box-tp"><b></b></s>
        <div class="box-hd">
            <h3>Drag</h3>
        </div>
        <div class="box-bd">
            point drag
        </div>
        <s class="box-bt"><b></b></s>
    </div>
   
    
    <div class="box" >
        <s class="box-tp"><b></b></s>
        <div id="drop" class="box-bd ks-dd">
            drop zone
        </div>
        <s class="box-bt"><b></b></s>
    </div>
    
</div>

<script>
KISSY.use("node,dd", function (S, Node, DD) {
    var DDM = DD.DDM,

    Draggable = DD.Draggable,
        Droppable = DD.Droppable,

            DropMode=Draggable.DropMode;


    var p;
    /**
     * 集中监听所有
     */
    DDM.on("dragstart", function(ev) {

        var c = ev.drag;
        p = c.get("dragNode").css("position");
    });
    DDM.on("dragend", function(ev) {
        var c = ev.drag;
        c.get("dragNode").css("position", p);
    });

    /**
     * 简单拖放
     */


    var c1 = new Draggable({
        node:"#c1",
        //模式,
        // intersect :区域相交就算enter
        // strict : drag 区域完全在 drop 区域内才算
        // point : 鼠标在 drop 区域内
        //默认 point
        mode:DropMode.INTERSECT,
        move:true
    });


    var c3 = new Draggable({
        node:"#c3",
        mode:DropMode.STRICT,
        move:true
    });


    var c2 = new Draggable({
        node:"#c2",
        move:true
    });


    var drop = new Droppable({
        node:"#drop"
    });


    function onhit(ev) {
        ev.drag.get("node").css("margin", "5px 10px");
        ev.drag.get("node").appendTo(ev.drop.get("node"));
        ev.drag.destroy();
    }

    drop.on("drophit",onhit);

});
</script>

</body>
</html>